import React, { Component } from 'react'
import './index.css'
import { Image, Row, Col, Divider } from 'antd';
import { getDragonBall } from '../../../api/find'

export default class Icon extends Component {
  state = {
    iconList: []
  }
  async componentDidMount () {
    this.setState({ iconList: (await (getDragonBall())).data })
  }
  render () {
    return (
      <div id="icon">
        <Row justify="space-around">
          {this.state.iconList.slice(0, 4).map(icon => (
            <Col key={icon.id} span={6}>
              <Image className="iconImg" preview={false} src={icon.iconUrl} />
              <p className="iconName">{icon.name}</p>
            </Col>
          ))}
        </Row>
        <Divider />
      </div>
    )
  }
}
